<template>
  <div class="login">
    <van-nav-bar title="登录" left-arrow @click-left="$router.go(-1)" />
    <div class="box_7 flex-row">
      <div class="text-group_6 flex-col justify-between">
        <span class="text_1">欢迎来到潮玩盲盒</span>
        <span class="text_2">乐享新体验！只为你制造惊喜！</span>
      </div>
    </div>
    <div class="box_2">
      <div class="text-wrapper_13">
        <span class="text_4" @click="isShow = true" :class="isShow ? 'active' : ''">账号登录</span>
        <span class="text_5" @click="isShow = false" :class="isShow ? '' : 'active'">号码登录</span>
      </div>
      <section class="section1" v-show="isShow">
        <div class="inptext">
          <p class="text_6">账号</p>
          <input class="text_7" v-model="phone" placeholder="请输入账号" />
        </div>
        <div class="inptext2">
          <p class="text_6">密码</p>
          <input class="text_7" type="password" v-model="password" placeholder="请输入密码" />
        </div>
      </section>
      <section class="section2" v-show="!isShow">
        <div class="inptext">
          <p class="text_6">手机号</p>
          <input class="text_7" type="number" placeholder="请输入手机号" />
        </div>
        <div class="inptext2">
          <p class="text_6">验证码</p>
          <div class="text11">
            <input class="text_7" type="password" placeholder="请输入验证码" /><span class="test">获取验证码</span>
          </div>
        </div>
      </section>
      <button class="text-wrapper_2 text_10" @click="login()">登录</button>
      <div class="text-wrapper_14">
        <span class="text_11" @click="repd">忘记密码？</span>
        <span class="text_12" @click="reg">注册登录</span>
      </div>
      <label for="" class="box_10"><input type="checkbox" />登录/注册表示同意<span>《用户协议》</span>和<span>《隐私协议》</span></label>
    </div>
  </div>
</template>
<script>
import { NavBar } from "vant";
import Api from "@/api";
export default {
  data() {
    return {
      isShow: true,
      phone: "",
      password: "",
    };
  },
  methods: {
    async login() {
      let { data } = await Api.setLogin({
        phone: this.phone,
        password: this.password,
      });
      console.log(data);
      this.$store.commit("bian/setdata", data.data);
      // console.log(this.$store.state.data, "store.state.data");
      // this.phone = "";
      this.password = "";
      this.$router.push({ path: "lunbo" });
    },
    repd() {
      this.$router.push({ path: "repswd" });
    },
    reg() {
      this.$router.push({ path: "reg" });
    },
  },
};
</script>

<style scoped>
.box_7 {
  width: 374.5px;
  height: 224px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pstukfqkimuezh9e0aj8b1h4aoap6aw3pr567a7734-5955-4e9d-a5d9-cc8d3469a2d7) -1px 0px no-repeat;
  background-size: 375px 224px;
  padding-top: 80px;
  padding-left: 14px;
}

.text_1 {
  width: 214px;
  height: 26px;
  color: rgba(0, 0, 0, 1);
  font-size: 26px;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin-left: 5px;
}

.text_2 {
  width: 186px;
  height: 13.5px;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  /* margin-top: 6px; */
  margin-left: 5px;
}

.box_2 {
  width: 375px;
  height: 479.5px;
  line-height: 20px;
  border-radius: 18px 18px 0px 0px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  border-radius: 10px;
  margin-top: -24px;
}

.text-wrapper_13 {
  width: 176.5px;
  height: 17px;
  margin: 0px 0 0 50.5px;
  padding-top: 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.text_4 {
  width: 70.5px;
  height: 17px;
  color: rgba(155, 155, 155, 1);

  font-size: 18px;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 18px;
}

.text_5 {
  width: 70px;
  height: 17px;
  color: rgba(155, 155, 155, 1);
  font-size: 18px;
  font-family: PingFangSC-Regular;
  text-align: center;
  white-space: nowrap;
  line-height: 18px;
}

.active {
  color: rgba(0, 0, 0, 1);
}

.inptext {
  width: 268px;
  height: 60px;
  border-bottom: 1px solid #ccc;
  /* background: red; */
  margin: 42.5px 0 0 53px;
}

.inptext2 {
  width: 268px;
  height: 60px;
  border-bottom: 1px solid #ccc;
  /* background: red; */
  margin: 25px 0 0 53px;
}

.text_6 {
  width: 31px;
  height: 15.5px;
  color: rgba(68, 67, 67, 1);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
}

.text_7 {
  width: 266.5px;
  height: 20px;
  border: none;
  color: rgba(153, 153, 153, 1);
  font-size: 12px;
  font-family: PingFangSC-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 12px;
  margin: 15px 0 0 0px;
}

.text11 {
  display: flex;
  justify-content: space-between;
}

.test {
  width: 100px;
  height: 20px;
  font-size: 12px;
  white-space: nowrap;
  margin: 15px 0 0 0px;
  background-image: linear-gradient(257deg,
      rgba(182, 220, 255, 1) 0,
      rgba(182, 220, 255, 1) 0,
      rgba(185, 182, 229, 1) 100%,
      rgba(185, 182, 229, 1) 100%);
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
}

.text-wrapper_2 {
  background-image: linear-gradient(257deg,
      rgba(182, 220, 255, 1) 0,
      rgba(182, 220, 255, 1) 0,
      rgba(185, 182, 229, 1) 100%,
      rgba(185, 182, 229, 1) 100%);
  border-radius: 24px;
  height: 48px;
  width: 268.5px;
  margin: 21.5px 0 0 52px;
}

.text_10 {
  color: rgba(45, 50, 67, 1);
  font-size: 17px;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 17px;
  margin: 16.5px 0 0 0;
  border: none;
}

.text-wrapper_14 {
  width: 255px;
  height: 14.5px;
  margin: 45px 0 50px 60px;
  display: flex;
  justify-content: space-between;
}

.text_11 {
  width: 67.5px;
  height: 14.5px;
  color: rgba(69, 67, 67, 1);
  font-size: 15px;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 15px;
}

.text_12 {
  width: 59px;
  height: 14.5px;
  color: rgba(69, 67, 67, 1);
  font-size: 15px;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 15px;
}

.box_10 {
  width: 267.5px;
  height: 26px;
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
}

.box_10 span {
  color: rgba(46, 114, 186, 1);
}

/* .text_15 {
  width: 504px;
  height: 23px;
  color: rgba(0, 0, 0, 1);
  font-size: 24px;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
} */

/* .text_16 {
  width: 504px;
  height: 23px;
  color: rgba(46, 114, 186, 1);
  font-size: 24px;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
} */
</style>
